<template>
    <div id="login-box">
       <div id="login">
            <!-- 登录页面 -->
        <p>登录账号</p>
        <p>虾米-严选商城欢迎您</p>
        <input type="text" placeholder="手机号码" ref="tel" 
         v-model="obj.tel" @blur="text1Blur">
        <input type="password" placeholder="密码" v-model="obj.password"  ref="password" 
         @blur="text2Blur">
        <button @click="login">登录</button>
        <p @click="goupgrading">忘记密码</p>
        <p @click="goregister">还没有注册?立即注册</p>
       </div>
         <i class="icon iconfont  icon-rfq" > </i>
         <i class="icon iconfont  icon-pin" > </i>
        
    </div>
</template>

<script>
import {getLogin} from '../../utils/api/Cart'
export default {
    data() {
        return {
            obj:{
                tel:'',
                password:''
            }
        };
    },
    created() {
       
    },
    methods: {
       
        // 手机号码离开事件
        text1Blur() {
            if(/^1[3|4|5|7|8][0-9]{9}$/.test(this.obj.tel)){
            this.$refs.tel.style.border = 'green 1px solid'
            } else {
                this.$refs.tel.style.border = 'red 1px solid'
            }
        },
        // 密码离开事件
        text2Blur() {
            if(this.obj.password != ''){
            this.$refs.password.style.border = 'green 1px solid'
            } else {
                this.$refs.password.style.border = 'red 1px solid'
            }
        },
         // 登录按钮
        login() {
             if(/^1[3|4|5|7|8][0-9]{9}$/.test(this.obj.tel) && this.obj.password != ''){
                    getLogin(this.obj).then(res => {
                    console.log(res);
                    
                    this.$loading.show('登录成功')
                    this.$router.push('/index')
                     var aa = window.setInterval(() => {
                        this.$loading.hide()
                    },500)

                })
             } else {
                this.$loading.show('拼命加载中...')
                 this.$loading.show('账号或密码错误')
                   var bb = window.setInterval(() => {
                        this.$loading.hide()
                    },500)
                 
             }
            // clearInterval(aa)

            // clearInterval(bb)




             
        },
        // 立即注册
        goregister() {
            this.$router.push('register')
        },
        // 忘记密码
        goupgrading() {
            this.$router.push('upgrading')
        }

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#login-box{
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    height: 667px;
    .icon-rfq{
        position: absolute;
        top: 190px;
        right: 65px;
    }
    .icon-pin{
         position: absolute;
        top: 268px;
        right: 65px;
    }
}
#login{
    
    width: 100%;
    background-color: #fff;
    color: #666666;
    padding:0 .8rem;
    :nth-child(1){
        font-size: .6rem;
        margin: 1rem 0 .8rem;
    }
    :nth-child(2){
        font-size: .3rem;
        margin: .6rem 0 ;
    }
    input{
        margin-left: .02rem;
        margin-bottom: .2rem;
        background-color: #F5F5F5;
        border: none;
        border-radius: .12rem;
        width: 5.6rem;
        height: 1rem;
        font-size: .3rem;
        padding-left: .4rem;
    }
    button{
        width: 4rem;
        height: 1rem;
        margin: .2rem auto .4rem;
        font-size: .3rem;
        display: block;
         border: none;
        border-radius: .12rem;
        color: #fff;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    }
    :nth-child(6){
        font-size: .3rem;
        width: 100%;
        height: .4rem;
        color: #989898;
        text-align: center;
        margin: .6rem auto ;
        
    }
    :nth-child(7){
        font-size: .3rem;
        width: 100%;
        height: .4rem;
        color: #549FF9;
        text-align: center;
        margin: .6rem auto ;
        
    }
}
</style>
